<script setup lang="ts">
import { putSetUserInfoApi } from '@/services/my'
import { useMemberStore } from '@/stores'
import type { userInfoType } from '@/types/my'
import { Toast } from '@/utils/tools'
import { onShow } from '@dcloudio/uni-app'
import { ref, onUpdated } from 'vue'

const memberStore = useMemberStore()
const inputPlaceholder = ref('') // 修改请输入字符
const query = defineProps<{
  type: string
}>()
// console.log(query.type)
query.type === 'nickName'
  ? (inputPlaceholder.value = '请输入您的昵称')
  : (inputPlaceholder.value = '请输入您的邮箱')

// 实时获取输入的昵称长度
const inputName = ref()
onShow(() => {
  inputName.value = memberStore.userInfo?.nickName
  inputLength.value = inputName.value.length
  emailVal.value = memberStore.userInfo?.email
})
const inputMax = ref(16) // 最大输入长度
const inputLength = ref() // 实时获取输入长度
onUpdated(() => {
  inputLength.value = inputName.value.length
})

// 用来触发小程序的自动获取名称
const getName = (event: any) => {
  if (event.detail.value.length) {
    memberStore.userInfo!.nickName = event.detail.value // 修改本地缓存名称
    inputName.value = event.detail.value // 修改页面名称
  }
}

/**修改用户 名称 */
const setName = async () => {
  memberStore.userInfo!.nickName = inputName.value
  if (inputName.value.length <= 0) {
    return Toast('请输入正确的昵称')
  }
  setUserInfo('nickName')
}
const emailMax = 30
const emailVal = ref<string>()
/**修改邮箱 方法 */
const setEmail = async () => {
  const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
  if (!regex.test(emailVal.value!)) return Toast('请输入正确的邮箱')
  memberStore.userInfo!.email = emailVal.value // 修改本地缓存
  setUserInfo('email')
}

/** 修改用户信息 */
const setUserInfo = async (type: string) => {
  const param = <userInfoType>{
    id: memberStore.userInfo!.id,
    nickName: memberStore.userInfo!.nickName,
    mobile: memberStore.userInfo!.mobile,
    email: memberStore.userInfo!.email,
  }
  const res = await putSetUserInfoApi(param)
  if (res.code === 200) {
    Toast(type === 'nickName' ? '名称修改成功' : type === 'email' ? '邮箱修改成功' : '')
    setTimeout(() => {
      uni.navigateBack()
    }, 500)
  } else {
    Toast(type === 'nickName' ? '名称修改失败' : type === 'email' ? '邮箱修改失败' : '')
  }
}
</script>

<template>
  <view class="box">
    <view class="loginText"
      ><view class="text_left"></view
      ><view class="text_right"
        >设置{{ inputPlaceholder === '请输入您的昵称' ? '昵称' : '邮箱' }}</view
      ></view
    >
    <!-- ！！！！！！！！！！！！！！！！！！昵称！！！！！！！！！！！！！！！！！！！！！！！！ -->
    <view v-if="inputPlaceholder === '请输入您的昵称'">
      <view
        ><input
          @blur="getName"
          type="nickname"
          :maxlength="inputMax"
          class="inputName"
          v-model.trim="inputName"
          :placeholder="inputPlaceholder"
        />
        <text class="buttonLocation"
          ><text>{{ inputLength }}</text
          >/{{ inputMax }}</text
        >
      </view>
      <button @tap="setName" class="submitButton">保存</button>
      <view class="tipText" hover-class="none">
        <view class="text_1">昵称最多不超过{{ inputMax }}个字符</view>
        <view class="text_1">请勿使用任何涉及暴力/恐怖/黄色/政治等相关词汇</view>
        <view class="iconfont icon_plaint"></view>
      </view>
    </view>
    <!-- ！！！！！！！！！！！！！！！！！！邮箱！！！！！！！！！！！！！！！！！！！！！！！！ -->
    <view v-else>
      <input
        type="text"
        class="inputName"
        v-model.trim="emailVal"
        :placeholder="inputPlaceholder"
        :maxlength="emailMax"
      />
      <button class="submitButton" @tap="setEmail()">保存</button>
    </view>
  </view>
</template>

<style lang="scss">
.box {
  box-sizing: border-box;
  width: 100%;
  // background: #fff;
  padding: 0 24rpx;
}
.loginText {
  display: flex;
  align-items: center;
  width: 256rpx;
  height: 70rpx;
  margin: 48rpx 0 118rpx 0;
  .text_left {
    background-color: $uni-color-motif;
    width: 8rpx;
    height: 46rpx;
  }
  .text_right {
    height: 70rpx;
    line-height: 70rpx;
    margin-left: 24rpx;
    font-size: 50rpx;
    color: $uni-color-motif;
    font-family: PingFang SC;
  }
}
view {
  width: 702rpx;
  position: relative;
  .inputName {
    width: 100%;
    height: 88rpx;
    border-bottom: 1px solid #0000001a;
  }
  .buttonLocation {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-size: 24rpx;
    color: #00000080;
    text {
      color: #333;
    }
  }
}
.submitButton {
  position: absolute;
  margin-top: 60rpx;
  width: 702rpx;
  height: 84rpx;
  line-height: 84rpx;
  background-color: $uni-color-motif;
  color: #fff;
  font-size: 26rpx;
  border-radius: 44rpx;
}
.tipText {
  box-sizing: border-box;
  position: relative;
  margin-top: 184rpx;
  font-size: 24rpx;
  color: #00000080;
  padding-left: 52rpx;
  .text_1 {
    width: 600rpx;
  }
  .iconfont {
    position: absolute;
    left: 2rpx;
    top: 2rpx;
    color: #0000004d;
  }
}
</style>
